<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="价格" name="first">
      <v-chart class="chart" :option="option" v-if="activeName === 'first'" />
    </el-tab-pane>
    <el-tab-pane label="跑分" name="second">
      <v-chart class="chart" :option="option" v-if="activeName === 'second'" />
    </el-tab-pane>
    <el-tab-pane label="游戏帧率" name="third">
      <v-chart class="chart" :option="option" v-if="activeName === 'third'" />
    </el-tab-pane>
    <el-tab-pane label="手感评分" name="fourth">
      <v-chart class="chart" :option="option" v-if="activeName === 'fourth'" />
    </el-tab-pane>
    <el-tab-pane label="电池容量" name="five">
      <v-chart class="chart" :option="option" v-if="activeName === 'five'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";

import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import axios from "axios";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  BarChart,
]);

export default {
  name: "HelloWorld",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "light",
  },
  data() {
    return {
      activeName: "first",
      seriesLabel: {
        show: false,
      },
      option: null,
    };
  },
  async mounted() {
    let data = null;
    await axios({
      method: "get",
      url: "http://localhost:8081/api/brand/getphoneRank",
      params: {
        rankReason: "price",
      },
    }).then((res) => {
      data = res.data.data;
      // console.log(data.map((item) => item.phone_name).reverse());
    });
    this.option = {
      title: {
        text: "价格Top 20（从高到低）",
      },
      tooltip: {},
      legend: {
        data: ["价格"],
      },
      xAxis: {},
      yAxis: { data: data.map((item) => item.phone_name).reverse() },
      series: [
        {
          name: "价格",
          type: "bar",
          data: data.map((item) => item.price).reverse(),
        },
      ],
    };
  },
  watch: {
    activeName: async function (val) {
      let rankReason = null;
      let optionVal = null;
      switch (val) {
        case "first":
          rankReason = "price";
          optionVal = "价格";
          break;
        case "second":
          rankReason = "points";
          optionVal = "跑分";
          break;
        case "third":
          rankReason = "frame_rate";
          optionVal = "帧率";
          break;
        case "fourth":
          rankReason = "feel";
          optionVal = "手感";
          break;
        case "five":
          rankReason = "battery";
          optionVal = "电池容量";
          break;
        default:
          break;
      }
      if (rankReason) {
        let data = null;
        await axios({
          method: "get",
          url: "http://localhost:8081/api/brand/getphoneRank",
          params: {
            rankReason,
          },
        }).then((res) => {
          data = res.data.data;
        });
        this.option = {
          title: {
            text: `${optionVal}Top 20（从高到低）`,
          },
          tooltip: {},
          legend: {
            data: [rankReason],
          },
          xAxis: {},
          yAxis: { data: data.map((item) => item.phone_name).reverse() },
          series: [
            {
              name: optionVal,
              type: "bar",
              data: data.map((item) => item[rankReason]).reverse(),
            },
          ],
        };
      }
    },
  },
  methods: {
    handleClick() {
      return;
    },
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 600px;
}
</style>
